<template>
    <Tabs v-model="sectionShow">
      <Tab-pane v-for="(tab,index) in showTabs"  v-if="tab.show" :label="tab.name" :key="index">
        <components :is="'Panel_'+tab.code" v-show="index==sectionShow" v-if="sectionLoad[index]"></components>
      </Tab-pane>
    </Tabs>
</template>

<script>
import Panel_main from "./main";
import Panel_aging from "./aging";
import Panel_call from "./call";
import Panel_product from "./product";
import Panel_outsourcing from "./outsourcing";
import SectionLoad from "mixins/sectionLoad";

export default {
  mixins: [SectionLoad],
  data() {
    return {
      tabShow: 0,
      tabs: [
        {
          code: "main",
          name: "回款总览",
          show: true
        },
        {
          code: "call",
          name: "通话记录",
          show: false
        },
        {
          code: "aging",
          name: "账龄统计",
          show: true
        },
        {
          code: "product",
          name: "产品统计",
          show: false
        },

        {
          code: "outsourcing",
          name: "外包统计",
          show: false
        }
      ]
    };
  },
  computed: {
    showTabs() {
      return this.tabs.filter(tab => {
        return tab.show;
      });
    }
  },
  methods: {},
  created() {
    for (let i in this.showTabs) {
      this.sectionMapping[this.showTabs[i].code] = i;
    }
  },
  components: {
    Panel_main,
    Panel_aging,
    Panel_call,
    Panel_product,
    Panel_outsourcing
  }
};
</script>

<style>

</style>
